<template>
  <div class="thesis">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="我的选题" name="first">
        <!--        <el-row :gutter="20">-->
        <!--          <el-col :span="6">-->
        <!--            <div class="grid-content bg-purple">-->
        <!--              <el-button type="primary" icon="el-icon-edit" plain @click="add">添加</el-button>-->
        <!--            </div>-->
        <!--          </el-col>-->
        <!--        </el-row>-->
        <el-row>
          <el-col :span="24" v-if="!showTopic">
            <!-- <thesismain v-model="returnChooseInfo" style="margin-top: 16px"></thesismain>-->
            <el-table :data="returnChooseInfo" style="width: 100%;margin-top: 16px" v-loading="returnLoad" key="table1">
              <el-table-column align="center" width="80" type="index" label="序号"></el-table-column>
              <el-table-column align="center" width="" prop="topicTitle.title" label="毕设方向"></el-table-column>
              <el-table-column align="center" width="100" prop="topicTitle.teaName" label="指导老师"></el-table-column>
              <el-table-column align="center" width="" prop="studentSelection.title" label="项目标题"></el-table-column>
              <el-table-column align="center" width="" prop="topicTitle.description" label="备注"></el-table-column>
              <el-table-column prop="studentSelection.score" label="成绩" align="center" width="60">
                <template slot-scope="scope">
                  <span>{{scope.row.studentSelection.score==null?"--":scope.row.studentSelection.score}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" width="" label="">
                <template slot-scope="scope">
                  <el-tag type="danger" size="small" style="cursor: pointer"
                          v-if="scope.row.studentSelection.state=='0'">审核中
                  </el-tag>
                  <el-tag type="danger" size="small" style="cursor: pointer"
                          v-if="scope.row.studentSelection.state=='0'" @click="topic_del(scope.row)">删除
                  </el-tag>
                  <el-tag type="success" size="small" style="cursor: pointer"
                          v-if="scope.row.studentSelection.state!='0'" @click="topic_look(scope.row)">查看任务
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="24" v-if="showTopic">
            <el-table key="table3"
                      :data="tableData.filter(data => !search || data.topicTitles.teaName.toLowerCase().includes(search.toLowerCase())|| data.topicTitles.title.toLowerCase().includes(search.toLowerCase()))"
                      style="width: 100%" v-loading="topicLoad">
              <el-table-column align="center" label="序号" type="index" width="80"></el-table-column>
              <el-table-column align="center" label="指导老师" prop="topicTitles.teaName"></el-table-column>
              <el-table-column align="center" label="毕设方向" prop="topicTitles.title"></el-table-column>
              <el-table-column align="center" label="人数" width="80">
                <template slot-scope="scope">
                  <span>{{scope.row.count}}/15</span>
                </template>
              </el-table-column>
              <el-table-column align="center">
                <template slot="header" slot-scope="scope">
                  <el-input v-model="search" size="mini" placeholder="输入关键字搜索"/>
                </template>
                <template slot-scope="scope">
                  <el-tag type="warning" size="small" style="cursor: pointer"
                          v-if="scope.row.selected&&scope.row.count<15">
                    已选择
                  </el-tag>
                  <el-tag type="danger" size="small" style="cursor: pointer" v-if="scope.row.count>=count">人数已满</el-tag>
                  <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
                             v-if="!scope.row.selected&&scope.row.count<count">选择
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="待做任务" name="second">
        <!--        <unaccomplished></unaccomplished>-->
        <el-table :data="tableData4.filter(data => (data.stuTaskStatus==null||data.stuTaskStatus.status=='2')&&!compareTime(data.teacherReleaseTask.stopDate))" border
                  style="width: 100%">
          <el-table-column type="index" align="center" label="编号" width="80px" sortable></el-table-column>
          <el-table-column prop="teacherReleaseTask.type" align="center" label="任务类型" width="120px">
          </el-table-column>
          <el-table-column prop="topicTitle.title" align="center" label="毕设方向" width="" sortable>
            <!--            <template slot-scope="scope">-->
            <!--              <span style="margin-left: 10px">{{ scope.row.topic.title }}</span>-->
            <!--            </template>-->
          </el-table-column>
          <el-table-column prop="teacherReleaseTask.content" align="center" label="提交内容" width=""
                           sortable></el-table-column>
          <el-table-column prop="teacherReleaseTask.ask" align="center" label="任务要求" width=""
                           sortable></el-table-column>
          <el-table-column prop="teacherReleaseTask.stopDate" align="center" label="结束时间" width=""
                           sortable></el-table-column>

          <el-table-column align="center" label="操作" width="120">
            <template slot-scope="scope">
              <el-button size="mini" @click="handlePublish(scope.row)">查看</el-button>
            </template>
          </el-table-column>

        </el-table>
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      title="确定题目"
      :visible.sync="applyDialogVisible"
      width="30%"
      :before-close="handleClose2">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="项目名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="applyDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="titleSubmit">确 定</el-button>
        </span>
    </el-dialog>
  </div>

</template>

<script>

    import mythesis from '@/components/MythesisState'
    import thesismain from '@/components/thesismain'
    import unaccomplished from '@/components/unaccomplished'

    export default {
        name: "thesis",
        components: {mythesis, thesismain, unaccomplished},
        data() {
            return {
                count:15,
                userinfo: this.UserInfo.getUserInfo(),
                topicLoad: false,
                showTopic: false,
                returnLoad: false,
                applyDialogVisible: false,
                state: '',
                dialogVisible: false,
                activeName: 'first',
                form: {
                    name: "",
                },
                tableData: [],
                tableData4: [],
                search: '',
                chooseTopic: "",
                returnChooseInfo: [],
            }
        },
        methods: {
            compareTime(str){

                var d1=new Date(str).valueOf();
                var d2=new Date().valueOf();

                return d2>d1;
            },
            add() {
                this.dialogVisible = true
                this.selTeaTopic();
            },
            handleClick(tab, event) {
                // sessionStorage.setItem("activeName", tab.name.substring(0, tab.name.length));
            },
            handlePublish(row) {

                this.$router.push({
                    path: '/student/graduationproject/viewtasks',
                    query: {
                        id: encodeURIComponent(JSON.stringify(row)),
                    }
                })
            },
            handleClose2(done) {
                done();
            },
            handleClose(done) {
                var self = this;
                self.dialogVisible = false;

            },
            selTeaTopic() {
                var self = this;
                self.topicLoad = true;
                var data = this.UserInfo.getUserInfo();
                self.$delete(data, 'admissionDate');
                self.$delete(data, 'birthday');
                self.$http.post(self.URL.api + 'teacherTopic/selectByCollege', self.qs.stringify(data))
                    .then(function (response) {

                        self.tableData = response.data.data;
                        self.topicLoad = false;
                    })
                    .catch(function (error) {
                        self.topicLoad = false;

                    });
            },
            handleEdit(index, row) {
                this.applyDialogVisible = true;

                this.chooseTopic = row.topicTitles;
            },
            handleDelete(index, row) {

            },
            titleSubmit() {
                var self = this;
                self.applyDialogVisible = false
                self.topicLoad = true;

                var data = this.UserInfo.getUserInfo();

                var body = {
                    topicId: self.chooseTopic.id,
                    stuId: data.id,
                    title: self.form.name,
                    teaId: self.chooseTopic.teaId,
                    titleType: self.chooseTopic.title,
                    grade: self.chooseTopic.grade,
                }
                self.$http.post(self.URL.api + 'studentSelection/add', self.qs.stringify(body))
                    .then(function (response) {

                        if (response.data.flag) {
                            //选择成功
                            self.returnChooseInfo = response.data.data;
                            self.topicLoad = false;
                            self.dialogVisible = false;
                            self.MyMessage("选择成功！！！", "success");
                            self.selected(self.userinfo.id);
                            self.selTeaTopic();
                            self.form.name = "";
                        } else {
                            self.selTeaTopic();
                            self.topicLoad = false;
                            self.MyMessage("选择失败，请稍后重试。", "warning");
                        }
                    })
                    .catch(function (error) {
                        self.selTeaTopic();
                        self.topicLoad = false;
                        self.MyMessage("选择失败，请稍后重试。", "warning");

                    });
            },
            selected(stuId) {
                var self = this;
                self.returnLoad = true;
                self.$http.post(self.URL.api + 'studentSelection/select', self.qs.stringify({stuId: stuId}))
                    .then(function (response) {

                        if (response.data.flag) {
                            self.returnLoad = false;
                            self.returnChooseInfo = response.data.data;
                            if (self.returnChooseInfo.length <= 0) self.showTopic = true;
                            else self.showTopic = false;
                            self.selTableData4();

                        } else {
                            self.returnLoad = false;
                        }
                    })
                    .catch(function (error) {
                        self.returnLoad = false;

                    });
            },
            topic_del(row) {
                var self = this;

                var body = row.studentSelection;

                self.$confirm('确定要删除吗？, 是否确定?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.returnLoad = true;
                    self.$http.post(self.URL.api + 'studentSelection/delete', self.qs.stringify(body))
                        .then(function (response) {

                            if (response.data.flag) {
                                self.returnLoad = false;
                                self.MyMessage("删除成功！！！", "success");

                                self.selected(self.userinfo.id);
                                self.selTeaTopic();
                                self.selTableData4();
                            } else {

                                self.returnLoad = false;
                                self.MyMessage("删除失败，请稍后重试。", "warning");
                            }
                        })
                        .catch(function (error) {
                            self.returnLoad = false;
                            self.MyMessage("删除失败，请稍后重试。", "warning");

                        });
                }).catch(() => {
                    self.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            topic_look(row) {
                // this.$router.push({name: 'Viewtasks', params: {}});
                //this.$router.push({name: 'information', params: {}});
                this.$router.push({
                    path: '/student/index/information',
                    query: {
                        id: row.studentSelection.topicId
                    }
                })
                //console.log(row.studentSelection.id)
            },
            MyMessage(msg, type) {
                this.$message({
                    message: msg,
                    type: type
                });
            },
            selTableData4() {
                //studentSelection/stuSelTopic
                var self = this;
                var body = {
                    stuId: self.userinfo.id,
                }
                self.$http.post(self.URL.api + 'studentSelection/stuSelTopic', self.qs.stringify(body))
                    .then(function (response) {

                        if (response.data.flag) {
                            self.tableData4 = response.data.data;
                        } else {

                        }
                    })
                    .catch(function (error) {

                    });
            },
        },
        mounted() {

            // 用户信息--------------------------------
            // admissionDate: "2017-08-31T16:00:00.000+0000"
            // birthday: "1999-10-12T16:00:00.000+0000"
            // clazzId: "4"
            // college: "1"
            // faceIcon: "https://happytell.oss-cn-beijing.aliyuncs.com/muxin/1021192130322DCB6E4F374EAD9F8DB02C0BAA4C22.png?x-oss-process=style/small"
            // id: "1195998117456015360"
            // identityCard: "511621199802058754"
            // name: "卿松源"
            // phone: "18111394485"
            // qq: "1050358701"
            // remarks: ""
            // sex: "男"
            // state: "1"
            // studentId: "201761021203102"
            // uid: "1195998117456015361"
            // 用户信息--------------------------------end
            this.selTeaTopic();
            this.selTableData4();
            this.selected(this.userinfo.id);
        },
        created() {
            // var itemid = this.$route.query.itemid
            // var activ = sessionStorage.getItem("activeName");
            // this.activeName = itemid != undefined ? itemid : (activ != null ? activ : "first")



        }

    }
</script>

<style scoped>

  .addr {
    color: #d6d6d7;
    font-size: 12px;
  }

</style>
